<template>
	<view class="s-page-wrapper is-100vh">
		<view class="is-33vh has-mgt-10">
			<view class="is-flex is-column is-justify-center  is-align-center is-height-100">
				<image src="../../static/img/common/logo.jpg" mode="aspectFit" class="logoimg"></image>
				<text class="t-welcome">你好，欢迎</text>
			</view>
		</view>
		<view class="content">
			<view class="has-mglr-10 ">
				<view class=" has-mgtb-10 ">
					<input type="number" maxlength="11" v-model="login.phone" placeholder="手机号" class="is-input1 is-size-18" />
				</view>
				<view class=" has-radius has-mgtb-10">
					<input type="password" v-model="login.password" placeholder="密码" class="is-input1" />
				</view>

				<view class=" loginbtn has-radius has-mgtb-20">
					<button type="primary" :loading="login.loading" @tap="defaultHandlerLogin"> {{ login.loading ? "登录中...":"登 录"}} </button>
				</view>
			</view>
		</view>
		<view class="is-20vh has-mgt-80 content s-row">
			<navigator url="reg_member" class="is-grey is-size-14 has-pdl-30 is-col-6" hover-class="">
				<text>注册会员</text>
			</navigator>
			<navigator url="find_password" class="is-grey is-size-14 has-pdl-30 is-col-6 has-floatr" hover-class="">
				<text>找回密码</text>
			</navigator>
			<!-- <navigator url="login" open-type="reLaunch" class="is-grey is-size-14 has-pdl-30 is-col-6 has-floatr" hover-class="">
				<text>线路切换</text>
			</navigator> -->
		</view>
		<view class="clearfix"></view>
		<view class="is-foot has-pdlr-20 has-mgb-10">
			<view class="is-footbox s-row">
				<view class="is-size-14 is-col-12">{{userip}}</view>
				<view class="is-size-14 is-col-12">{{banben}}</view>
				<!-- <view class="clearfix"></view>
				<view class="is-size-14 is-col-24">{{lines}}</view> -->
			</view>
		</view>
		<view>
		    <show-modal></show-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: {
					loading: false,
					phone:"",
					password:""
				},
				userip:'',
				banben:'',
				lines:''
			};
		},
		onLoad(){
			let phone = uni.getStorageSync('loginphone');
			//console.log(phone)
			if(phone){
				this.login['phone'] = phone; 
			}
			//#ifdef APP-PLUS
			this.lines = '当前线路：线路一';
			plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
				this.banben = '当前版本：'+ wgtinfo.version;//应用版本号
			})
			uni.request({
				url: 'https://getipv4.azurewebsites.net', 
				header:{
					'content-type':'application/x-www-form-urlencoded',
				},
				success: (res) => {
					//console.log(res);
					if(res.data){
						this.userip = '本机IP：' +res.data;
					}
				}
			})
			//#endif
		},
		methods:{
			defaultHandlerLogin:function(){
				if (!this.login.phone.match(/^(13[0-9]|14(5|7)|15(0|1|2|3|5|6|7|8|9)|18[0-9])\d{8}$/)) {  
					uni.showToast({
					    title: '手机号码不正确',
						mask:true,
						icon:'none'
					}); 
				}else{
					uni.request({
						url:this.service.FOX_URL+'diamond/checklogin',
						method:'POST',
						data: {
							user_tel: this.login.phone,
							user_pass: this.login.password
						},
						dataType:'json',
						header:{
							'content-type':'application/x-www-form-urlencoded',
						},
						success: res => {
							uni.setStorageSync('loginphone', this.login.phone);
							var rest = JSON.stringify(res);
							// console.log(res)
							var rest = res.data;
							if(rest.status == 'error'){
								this.login.loading = true;
								setTimeout((e=>{
									this.login.loading = false;
								}),1500);
								uni.showToast({
									title:rest.msg,
									icon:'none',
									mask:true
								})
							}else if(rest.status == 'password'){
								uni.reLaunch({
									url:'./captcha'
								})
							}else if(rest.status == 'success'){
								this.userinfo = rest.msg;
								const data = {
								    foxtel: this.login.phone,
								    foxcode: this.service.RandomNum(1000,9999),
								    foxtoken: this.userinfo['user_key'],
									foxuid: this.userinfo['user_id'],
								    foxactive: true
								}
								uni.clearStorageSync();
								this.service.addfox(data);
								uni.navigateTo({
									url:'../index/index'
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #FFFFFF;
	}

	.content {
		width: 85%;
		margin: 0 auto;
	}

	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #0084ff;
		opacity: 0.8;
	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.is-input1 {
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		padding: 12rpx;
		color: #353535;
		font-size: 32rpx;
		box-sizing: border-box;
		appearance: none;
		border-bottom: 1rpx solid #e5e5e5;
		box-shadow: none;
		outline: 0;
		display: block;
		padding-left: 30rpx;
		margin: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
	}
	.t-welcome{
		font-weight: bold;
	}
</style>
